<template>
	<view>
		<view class="content">
			<view class="top">
				<view class="top-title">{{detailData.product_name}}</view>
				<view class="top-price">￥{{detailData.price}}</view>
				<view class="top-data">{{detailData.day}}</view>
			</view>
			<view class="num">
				<text>数量：</text>
				<uniNumberBox value="1" @change="numberChange"></uniNumberBox>
			</view>
			<view class="info">
				<uni-forms :value="formData" ref="form" :rules="rules">
					<view class="info-title">预订信息</view>
					<view class="info-content">
						<uni-forms-item label="上车地点" name="place">
							<picker mode="selector" @change="bindPlaceChange" :value="placesIndex" :range="places" >
								<view class="picker">{{places[placesIndex]}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="上车时间" name="time">
							<picker mode="selector" @change="bindTimeChange" :value="timesIndex" :range="times">
								<view class="picker">{{times[timesIndex]}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="姓名" name="name">
							<uni-easyinput type="text" v-model="formData.name" placeholder="请输入联系人姓名" />
						</uni-forms-item>
						<uni-forms-item label="电话" name="phone">
							<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入联系电话" />
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
			<view class="footer">
				<view class="total-price">应付：<text class="symbol">&yen;</text><text
						class="number">{{totalPrice.toFixed(2)}}</text>
				</view>
				<view class="btn" @click="submitForm">提交订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiUrl
	} from '@/api/base.js'
	import uniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue'
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				places: [],
				times: [],
				placesIndex: 0,
				timesIndex: 0,
				detailData: "",
				totalPrice: 0,
				formData: {
					fx_id: 0,
					use_date: '',
					user_id: 0,
					place: '',
					time: '',
					product_id: 0,
					price: 0,
					name: '',
					phone: '',
					num: 1,
				},
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入正确的手机号码',
							},
							{
								format: 'number',							
								errorMessage: '请输入正确的手机号码',
							}
						]
					},
					place: {
						rules: [{
								required: true,
								errorMessage: '请选择上车地点',
							}
						]
					},
					time: {
						rules: [{
								required: true,
								errorMessage: '请选择上车时间',
							}
						]
					}
				}

			}
		},
		onLoad(opt) {

			this.detailData = opt
			this.formData.use_date = opt.day
			this.formData.price = opt.price
			this.formData.product_id = opt.product_id
		},
		onShow() {
			if (uni.getStorageSync("userInfo")) {
				this.formData.user_id = uni.getStorageSync("userInfo").id
			} else {
				uni.navigateTo({
					url: '/pages/my/login'
				});
			}
			var that = this
			//获取产品信息
			uni.request({
				url: apiUrl + "addons/car/product/detail",
				data: {
					id: this.formData.product_id
				},
				method: "GET",
				success: (res) => {
					let data = res.data.data.times
					let time = [''];
					let curtimestamp = parseInt(new Date().getTime()/1000);					
					data.forEach(item => {
						let timestr = new Date((new Date(this.formData.use_date)).toLocaleDateString()+" "+item.btime+":00").getTime()/1000;  
						if((timestr-curtimestamp>900))
							time.push(item.btime);
					})
					that.times = time
				},
				fail: (res) => {
					console.log(res)
				}

			})

			uni.request({
				url: apiUrl + "addons/car/place/index",
				data: "",
				method: "GET",
				success: (res) => {
					let data = res.data.data
					let place = [''];
					data.forEach(item => {
						place.push(item.place_name);
					})
					that.places = place
				},
				fail: (res) => {
					console.log(res)
				}
			})
		},
		methods: {
			submitForm(form) {
				this.$refs.form.submit().then(res => {
					this.formData.place = this.places[this.placesIndex]
					this.formData.time = this.times[this.timesIndex]
					let curtimestamp = parseInt(new Date().getTime()/1000);		
					let timestr = new Date((new Date()).toLocaleDateString()+" "+this.formData.time+":00").getTime()/1000; 
					if((timestr-curtimestamp<900)){
						uni.showModal({
						    title: '提示',
						    content: '下单必须提前15分钟',
						    success: function (res) {
						        wx.navigateBack({
						          delta: 1
						        })
						    }
						});
					}else{
						if (uni.getStorageSync("fxid")) {
							this.formData.fx_id = uni.getStorageSync("fxid")
						}
						uni.request({
							header: {
								'Content-Type': 'application/json'
							},
							url: apiUrl + "addons/car/order/create",
							data: this.formData,
							method: "POST",
							dataType: 'json',
							success: (res) => {
								uni.navigateTo({
									url: '/pages/pay/index?order_sn=' + res.data.data.order_sn
								});
							},
							fail: (res) => {
								uni.navigateTo({
									url: '/pages/pay/confirmfail'
								});
							}
						
						})
					}					
				})
			},
			bindPlaceChange: function(e) {
				this.placesIndex = e.target.value
				this.formData.place = this.places[e.target.value]
			},
			bindTimeChange: function(e) {
				this.timesIndex = e.target.value
				this.formData.time = this.times[e.target.value]
			},
			numberChange(e) {
				this.formData.num = e
				this.totalPrice = e * this.detailData.price;
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		position: absolute;
		z-index: 9999;
		background-color: #F7F7F7;
	}

	.top {
		margin-bottom: 10rpx;
	}

	.top-title {
		padding: 20rpx;
		background-color: #FFFFFF;
		font-weight: bold;
	}

	.top-price {
		color: #DD524D;
		padding: 0 20rpx 20rpx 20rpx;
		background-color: #FFFFFF;
	}

	.top-data {
		padding: 0 20rpx 20rpx 20rpx;
		background-color: #FFFFFF;
	}

	.num {
		padding: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.info {
		background-color: #FFFFFF;
	}

	.info-title {
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: solid 2rpx #e1e1e1;
		padding: 20rpx;
		font-weight: bold;
	}

	.info-content {
		padding: 20rpx;
	}

	.footer {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		position: fixed;
		z-index: 111;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.total-price {
		color: #DD524D;
		font-size: 24rpx;
	}

	.number {
		font-size: 34rpx;
		font-weight: bold;
	}

	.btn {
		width: 205rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		border-radius: 10rpx;
		background-color: #ff6913;
		color: #FFFFFF;
		text-align: center;
	}

	.picker {	
		height: 37rpx;
		border: solid 2rpx #e1e1e1;
		border-radius: 10rpx;
		padding: 15rpx;
	}
</style>
